<template>
  <div class="my-collapse">
    <slot></slot>
  </div>
</template>

<script setup name="MyCollapse">
import { ref, provide } from 'vue'
import { collapseProps, collapseContextKey } from './props'
defineOptions({
  name: 'MyCollapse'
})
const emit = defineEmits(['change', 'update:modelValue'])
const props = defineProps(collapseProps)
const activeNames = ref(props.modelValue)
const handleItemClick = (itemName) => {
  let _activeNameArr = [...activeNames.value]
  if (props.accordion) {
    _activeNameArr = itemName === activeNames.value[0] ? [] : [itemName]
  }
  else {
    const index = _activeNameArr.indexOf(itemName)
    if (index !== -1) {
      _activeNameArr.splice(index, 1)
    }
    else {
      _activeNameArr.push(itemName)
    }
  }
  activeNames.value = _activeNameArr
  emit('update:modelValue', _activeNameArr)
  emit('change', _activeNameArr)
}

provide(collapseContextKey, {
  activeNames,
  handleItemClick
})
</script>

<style lang="scss" scoped>

</style>
